簡介

在 Canvas 第一篇我們有介紹到：

那麼 Canvas 是什麼呢？他其實就是一個 HTML tag 讓我們可以在網頁上定義一個畫布區域 並由 JavaScript context 物件來即時運算圖形並且繪製。

來看看 w3.org 的說法：

Interfaces are defined in terms of Web IDL.
This specification defines the 2d context type, whose API is implemented using the CanvasRenderingContext2D interface.

也就是說，我們在 HTML 上宣告了一個畫布區域，並在畫布上定義 2D context，如此一來我們就可以在畫布上面利用 Canvas API 直接操作 DOM Tree 上的元素

那麼下面就來簡單介紹一下 API 吧

什麼是 API ?

應用程式介面(Application Programming Interface)，他定義了多個軟體中介的資料互動，讓 電腦作業系統 或 程式函式庫 呼叫並且使用程式碼。

更白話一點來說，我們可以想像一下
當你加班到半夜回到家，又餓又累時卻又不想下廚，這時你拿出手機準備使用外送服務來溫飽自己，這時你：

1. 滿心期待的選擇好要購買的餐廳食物
2. 按下送出訂單按鈕
3. 餐廳準備晚餐
4. 外送員快速地領取餐點後安全無虞的將食物交付到你的手上

像這樣的流程就類似一種使用 API 的行為，外送 app 為一種介面，餐廳為一種數據庫，而外送員就是 API 了。你甚至不需要知道外送員是透過開跑車，還是騎摩托車領取餐點並送到你的手上。

API 可以是一組數量上千，非常複雜的函式與副程式，可讓程式設計師做很多事情比如 讀取檔案 或 顯示選單等功能。許多系統都是由 API 介面來實現，像是圖形系統、資料庫、網路服務、線上遊戲等等。

總之，不論你要做什麼是，基本上都會使用到 API，一個好的程式會有好的 API 來讓軟體工程師能更輕鬆的完成許多功能。

Canvas 處理原理

如同我們前面所說 Canvas 的 API 可以直接操作 DOM Tree 上的元素，以操作 Canvas 上的圖片大小為例，過程解析是：

1. 將外部圖片網址存成 DOM Tree 上的一個檔案。
2. 取得檔案的 blob url 。
3. 讓圖片檔的 src 連結用 blob url 讀取圖片資料。
4. 接著在 Canvas 透過 drawImage() 載入圖片，並設定好圖片元素對於畫布的距離、圖片元素的尺寸等。
5. 使用 Canvas API 對圖片元素執行動作。

透過這些步驟我們就可以抓取 Canvas 元素並透過 DOM Tree 即時運算程式來製作網頁動畫或遊戲了。

Canvas API

在 HTML 渲染完 Canvas tag 後，我們就要來取得他的 渲染環境(rendering context) ，我們必須定義完 2D context 後才能使用 Canvas API 來繪圖。

• 定義環境

var canvas = document.querySelector('canvas'); // in your HTML this element appears as <canvas id="mycanvas"></canvas>
var ctx = canvas.getContext('2d');

• beginPath() API 繪製圖形

ctx.beginPath()
ctx.arc(200, 200, 50, 0, Math.PI*2)
ctx.fillStyle="black"
ctx.fill()

另外 Canvas 也有很多其他 API 可以使用，若是有興趣了解的話可以參考 MDN -Canvas API 整理的資料。

今天介紹的是 Canvas 的 API ，但其實在這篇文章介紹前我們就已經頻繁的在使用了，透過今天的講解，又增加了奇怪但是非常實用的知識呢！

由於 Cnavas 的 API 還有很多可以讓使用者使用，不過因為篇幅的關係我們就不在這邊詳細敘述，若是有玩到特別有趣的 Canvas API 的話都很歡迎隨時回來分享討論呦！

那麼今天就先到這邊，我們明天見！

參考資料

• W3.org - Canvas 2D Context
• MDN - CanvasRenderingContext2D
• MDN - Canvas API
• Wiki - 應用程式介面
• Chris 技術筆記 - 前端的 File API